<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小区物业管理系统 - 用户管理</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                     primary: '#1e40af',
                     secondary: '#3b82f6',
                     accent: '#60a5fa',
                     light: '#f3f4f6',
                     dark: '#1e293b'
                 },
                 fontFamily: {
                     sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }

     // 关闭查看用户模态框
     const modal = document.getElementById('view-user-modal');
     const closeBtn = document.getElementById('close-view-user');
     
     // 确保模态框和关闭按钮都存在
     if (modal && closeBtn) {
         // 为关闭按钮添加点击事件监听器
         closeBtn.addEventListener('click', () => {
             modal.classList.add('hidden');
         });
         
         // 为背景遮罩添加点击事件监听器
         modal.addEventListener('click', (e) => {
             // 检查是否点击了背景遮罩本身
             if (e.target === modal) {
                 modal.classList.add('hidden');
             }
         });
     }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .card {
                @apply bg-white rounded-md shadow-sm border border-gray-100;
            }
            .card-header {
                @apply p-4 border-b border-gray-100 font-medium text-gray-700 flex items-center justify-between;
            }
            .card-body {
                @apply p-4;
            }
            .nav-link {
                @apply flex items-center px-4 py-3 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-md transition-all-300;
            }
            .nav-link.active {
                @apply bg-blue-50 text-blue-600;
            }
            .nav-link i {
                @apply mr-3;
            }
            .btn {
                @apply px-4 py-2 rounded-md font-medium transition-all-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
            }
            .btn-primary {
                @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
            }
            .btn-outline {
                @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-500;
            }
            .btn-sm {
                @apply px-3 py-1 text-sm;
            }
            .badge {
                @apply px-2 py-1 text-xs font-medium rounded-full;
            }
            .badge-success {
                @apply bg-green-100 text-green-800;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-800;
            }
            .badge-danger {
                @apply bg-red-100 text-red-800;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-800;
            }
            .badge-primary {
                @apply bg-purple-100 text-purple-800;
            }
            .table-row-hover {
                @apply hover:bg-gray-50 transition-all-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边导航栏 -->
        <aside class="w-64 bg-white shadow-sm hidden md:block">
            <!-- Logo -->
            <div class="flex items-center justify-center h-16 border-b border-gray-100">
                <div class="flex items-center">
                    <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c70bc843c62648c5ac1442b15138cda2~tplv-a9rns2rl98-image.image?rcl=20251027174223B6A1FC2217E476B2DCF3&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764150165&x-signature=fvtwF014Si8DyDXCBMppvkase%2BI%3D" 
                         alt="Property Management System Logo" 
                         class="w-8 h-8 mr-2">
                    <span class="text-lg font-semibold text-gray-800">物业管理系统</span>
                </div>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="p-4 space-y-1">
                <a href="dashboard.html" class="nav-link" data-target="dashboard-section">
                    <i class="fa fa-dashboard"></i>
                    <span>控制面板</span>
                </a>
                <a href="community.html" class="nav-link" data-target="community-section">
                    <i class="fa fa-building"></i>
                    <span>小区管理</span>
                </a>
                <a href="owners.html" class="nav-link" data-target="owners-section">
                    <i class="fa fa-users"></i>
                    <span>业主管理</span>
                </a>
                <a href="users.html" class="nav-link active" data-target="users-section">
                    <i class="fa fa-user-circle"></i>
                    <span>用户管理</span>
                </a>
                <a href="maintenance.html" class="nav-link" data-target="maintenance-section">
                    <i class="fa fa-wrench"></i>
                    <span>报修管理</span>
                </a>
                <a href="announcements.html" class="nav-link" data-target="announcements-section">
                    <i class="fa fa-bullhorn"></i>
                    <span>公告管理</span>
                </a>
                <a href="fee_management.html" class="nav-link" data-target="fee-management-section">
                    <i class="fa fa-credit-card"></i>
                    <span>物业收费管理</span>
                </a>
                <a href="settings.html" class="nav-link" data-target="settings-section">
                    <i class="fa fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </nav>
        </aside>
        
        <!-- 主内容区域 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm z-10">
                <div class="flex items-center justify-between h-16 px-6">
                    <!-- 移动端菜单按钮 -->
                    <button id="mobile-menu-button" class="md:hidden text-gray-500 hover:text-gray-700 focus:outline-none">
                        <i class="fa fa-bars"></i>
                    </button>
                    
                    <!-- 搜索框 -->
                    <div class="flex-1 max-w-md ml-4 md:ml-8">
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                <i class="fa fa-search text-gray-400"></i>
                            </span>
                            <input type="text" placeholder="搜索..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        </div>
                    </div>
                    
                    <!-- 用户菜单 -->
                    <div class="flex items-center space-x-4">
                        <!-- 通知 -->
                        <button class="relative text-gray-500 hover:text-gray-700 focus:outline-none">
                            <i class="fa fa-bell"></i>
                            <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
                        </button>
                        
                        <!-- 用户头像 -->
                        <div class="relative">
                            <button id="user-menu-button" class="flex items-center focus:outline-none">
                                <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white">
                                    <i class="fa fa-user"></i>
                                </div>
                                <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-400 hidden md:block"></i>
                            </button>
                            
                            <!-- 用户下拉菜单 -->
                            <div id="user-menu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-20 hidden">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                                <div class="border-t border-gray-100"></div>
                                <a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 移动端侧边栏 -->
            <div id="mobile-sidebar" class="fixed inset-0 z-40 hidden">
                <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
                <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white">
                    <div class="absolute top-0 right-0 -mr-12 pt-2">
                        <button id="close-sidebar-button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
                            <i class="fa fa-times text-white"></i>
                        </button>
                    </div>
                    <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
                        <div class="flex-shrink-0 flex items-center justify-center">
                            <img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/c70bc843c62648c5ac1442b15138cda2~tplv-a9rns2rl98-image.image?rcl=20251027174223B6A1FC2217E476B2DCF3&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764150165&x-signature=fvtwF014Si8DyDXCBMppvkase%2BI%3D" 
                                 alt="Property Management System Logo" 
                                 class="h-12 w-12">
                        </div>
                        <nav class="mt-5 px-2 space-y-1">
                            <a href="dashboard.html" class="nav-link" data-target="dashboard-section">
                                <i class="fa fa-dashboard"></i>
                                <span>控制面板</span>
                            </a>
                            <a href="community.html" class="nav-link" data-target="community-section">
                                <i class="fa fa-building"></i>
                                <span>小区管理</span>
                            </a>
                            <a href="owners.html" class="nav-link" data-target="owners-section">
                                <i class="fa fa-users"></i>
                                <span>业主管理</span>
                            </a>
                            <a href="users.html" class="nav-link active" data-target="users-section">
                                <i class="fa fa-user-circle"></i>
                                <span>用户管理</span>
                            </a>
                            <a href="maintenance.html" class="nav-link" data-target="maintenance-section">
                                <i class="fa fa-wrench"></i>
                                <span>报修管理</span>
                            </a>
                            <a href="announcements.html" class="nav-link" data-target="announcements-section">
                                <i class="fa fa-bullhorn"></i>
                                <span>公告管理</span>
                            </a>
                            <a href="fee_management.html" class="nav-link" data-target="fee-management-section">
                                <i class="fa fa-credit-card"></i>
                                <span>物业收费管理</span>
                            </a>
                            <a href="settings.html" class="nav-link" data-target="settings-section">
                                <i class="fa fa-cog"></i>
                                <span>系统设置</span>
                            </a>
                        </nav>
                    </div>
                </div>
            </div>
            
            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
                <!-- 用户管理 -->
                <section id="users-section" class="space-y-6">
                    <div class="flex items-center justify-between">
                        <h1 class="text-2xl font-bold text-gray-800">用户管理</h1>
                        <button id="add-user-button" class="btn btn-primary">
                            <i class="fa fa-plus mr-2"></i>
                            添加用户
                        </button>
                    </div>
                    
                    <!-- 用户列表 -->
                    <div class="card">
                        <div class="card-header">
                            <h3>用户列表</h3>
                            <div class="flex items-center space-x-2">
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                        <i class="fa fa-search text-gray-400"></i>
                                    </span>
                                    <input type="text" placeholder="搜索用户..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                </div>
                                <select class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                                    <option value="">选择用户类型</option>
                                    <option value="admin">管理员</option>
                                    <option value="user">普通用户</option>
                                    <option value="employee">员工</option>
                                </select>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户类型</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">密码</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
        <tr class="table-row-hover">
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge badge-warning">普通用户</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">admin</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                ********
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge badge-danger">已禁用</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                <a href="#" class="text-red-600 hover:text-red-900">删除</a>
            </td>
        </tr>
        <tr class="table-row-hover">
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge badge-warning">普通用户</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm font-medium text-gray-900">user1</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                ********
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="badge badge-danger">已禁用</span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <a href="#" class="text-blue-600 hover:text-blue-900 mr-3">查看</a>
                <a href="#" class="text-green-600 hover:text-green-900 mr-3">编辑</a>
                <a href="#" class="text-red-600 hover:text-red-900">删除</a>
            </td>
        </tr></tbody>
                            </table>
                        </div>
                        <div class="px-6 py-4 border-t border-gray-200">
                            <div class="flex items-center justify-between">
                                <div class="text-sm text-gray-700">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">3</span> 共 <span class="font-medium">5</span> 条结果
                                </div>
                                <div class="flex space-x-2">
                                    <button class="btn btn-sm btn-outline" disabled>
                                        <i class="fa fa-chevron-left"></i>
                                    </button>
                                    <button class="btn btn-sm btn-primary">1</button>
                                    <button class="btn btn-sm btn-outline">2</button>
                                    <button class="btn btn-sm btn-outline">
                                        <i class="fa fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>

    <!-- 添加用户模态框 -->
    <div id="add-user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">添加用户</h3>
                <button id="close-add-user" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="add-user-form" class="space-y-4">
                    <div>
                        <label for="user-type" class="block text-sm font-medium text-gray-700 mb-1">用户类型</label>
                        <select id="user-type" name="user-type" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="admin">管理员</option>
                            <option value="user">普通用户</option>
                            <option value="employee">员工</option>
                        </select>
                    </div>
                    <div>
                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <input type="text" id="username" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                    </div>
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                    </div>
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="status" name="status" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                            <option value="active">已激活</option>
                            <option value="inactive">未激活</option>
                        </select>
                    </div>
                    <div class="flex items-center justify-end space-x-3 pt-2">
                        <button type="button" id="cancel-add-user" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            取消
                        </button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            添加
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 查看用户模态框 -->
    <div id="view-user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">查看用户</h3>
                <button id="close-view-user" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">用户类型</label>
                        <div id="view-user-type" class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-md">管理员</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <div id="view-username" class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-md">admin</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <div id="view-password" class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-md">********</div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <div id="view-status" class="px-4 py-2 bg-gray-50 border border-gray-200 rounded-md"><span class="badge badge-success">已激活</span></div>
                    </div>
                </div>
                <div class="flex items-center justify-end mt-6">
                    <button id="close-view-user-btn" class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 编辑用户模态框 -->
    <div id="edit-user-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">编辑用户</h3>
                <button id="close-edit-user" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <form id="edit-user-form">
                    <input type="hidden" id="edit-user-id" name="id">
                    <div class="mb-4">
                        <label for="edit-user-type" class="block text-sm font-medium text-gray-700 mb-1">用户类型</label>
                        <select id="edit-user-type" name="user_type" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                            <option value="admin">管理员</option>
                            <option value="user">普通用户</option>
                            <option value="employee">员工</option>
                        </select>
                    </div>
                    
                    <div class="mb-4">
                        <label for="edit-username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
                        <input type="text" id="edit-username" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="edit-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                        <input type="password" id="edit-password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="不修改请留空">
                    </div>
                    
                    <div class="mb-4">
                        <label for="edit-status" class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                        <select id="edit-status" name="status" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                            <option value="active">已激活</option>
                            <option value="inactive">未激活</option>
                        </select>
                    </div>
                    
                    <div class="flex items-center justify-end space-x-3 pt-2">
                        <button type="button" id="cancel-edit-user" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            取消
                        </button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 删除确认模态框 -->
    <div id="delete-confirm-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 transform transition-all">
            <div class="flex items-center justify-between p-4 border-b border-gray-200">
                <h3 class="text-lg font-medium text-gray-900">确认删除</h3>
                <button id="close-delete-confirm" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <p class="text-gray-700 mb-6">您确定要删除该用户吗？此操作无法撤销。</p>
                <input type="hidden" id="delete-user-id">
                <div class="flex items-center justify-end space-x-3">
                    <button id="cancel-delete" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        取消
                    </button>
                    <button id="confirm-delete" class="px-4 py-2 bg-red-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        确认删除
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 模态框操作
        const addUserModal = document.getElementById('add-user-modal');
        const addUserButton = document.getElementById('add-user-button');
        const closeAddUser = document.getElementById('close-add-user');
        const cancelAddUser = document.getElementById('cancel-add-user');
        const viewUserModal = document.getElementById('view-user-modal');
        const closeViewUser = document.getElementById('close-view-user');
        const closeViewUserBtn = document.getElementById('close-view-user-btn');
        const editUserModal = document.getElementById('edit-user-modal');
        const closeEditUser = document.getElementById('close-edit-user');
        const cancelEditUser = document.getElementById('cancel-edit-user');
        const deleteConfirmModal = document.getElementById('delete-confirm-modal');
        const closeDeleteConfirm = document.getElementById('close-delete-confirm');
        const cancelDelete = document.getElementById('cancel-delete');
        const confirmDelete = document.getElementById('confirm-delete');
        const deleteUserIdInput = document.getElementById('delete-user-id');

        // 添加用户模态框
        if (addUserButton && addUserModal) {
            addUserButton.addEventListener('click', () => {
                addUserModal.classList.remove('hidden');
            });
        }

        if (closeAddUser && addUserModal) {
            closeAddUser.addEventListener('click', () => {
                addUserModal.classList.add('hidden');
            });
        }

        if (cancelAddUser && addUserModal) {
            cancelAddUser.addEventListener('click', () => {
                addUserModal.classList.add('hidden');
            });
        }

        // 为模态框背景添加点击事件
        if (addUserModal) {
            addUserModal.addEventListener('click', (e) => {
                if (e.target === addUserModal) {
                    addUserModal.classList.add('hidden');
                }
            });
        }

        if (viewUserModal) {
            viewUserModal.addEventListener('click', (e) => {
                if (e.target === viewUserModal) {
                    viewUserModal.classList.add('hidden');
                }
            });
        }

        if (closeViewUser && viewUserModal) {
            closeViewUser.addEventListener('click', () => {
                viewUserModal.classList.add('hidden');
            });
        }

        if (closeViewUserBtn && viewUserModal) {
            closeViewUserBtn.addEventListener('click', () => {
                viewUserModal.classList.add('hidden');
            });
        }

        // 查看用户功能
        const viewLinks = document.querySelectorAll('a[href="#"].text-blue-600');
        viewLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                // 在实际应用中，这里会根据用户ID获取用户详情
                if (viewUserModal) {
                    viewUserModal.classList.remove('hidden');
                }
            });
        })

        // 编辑用户模态框
        if (closeEditUser && editUserModal) {
            closeEditUser.addEventListener('click', () => {
                editUserModal.classList.add('hidden');
            });
        }
        
        if (cancelEditUser && editUserModal) {
            cancelEditUser.addEventListener('click', () => {
                editUserModal.classList.add('hidden');
            });
        }
        
        if (editUserModal) {
            editUserModal.addEventListener('click', (e) => {
                if (e.target === editUserModal) {
                    editUserModal.classList.add('hidden');
                }
            });
        }
        
        // 编辑用户功能 - 获取编辑链接
        const editLinks = document.querySelectorAll('a[href="#"].text-green-600');
        editLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                // 在实际应用中，这里会根据用户ID获取用户详情并填充表单
                if (editUserModal) {
                    editUserModal.classList.remove('hidden');
                    
                    // 模拟填充表单数据（实际应用中从API获取）
                    const userId = link.closest('tr')?.dataset.userId || '1';
                    document.getElementById('edit-user-id').value = userId;
                    // 这里可以根据实际情况设置默认值或从API获取的值
                }
            });
        });
        
        // 编辑用户表单提交处理
        const editUserForm = document.getElementById('edit-user-form');
        if (editUserForm) {
            editUserForm.addEventListener('submit', async (e) => {
                e.preventDefault();
                
                // 获取表单数据
                const userId = document.getElementById('edit-user-id').value;
                const editUserTypeSelect = document.getElementById('edit-user-type');
                const editUsernameInput = document.getElementById('edit-username');
                const editPasswordInput = document.getElementById('edit-password');
                const editStatusSelect = document.getElementById('edit-status');
                
                // 数据验证
                if (!editUsernameInput.value.trim()) {
                    alert('用户名不能为空！');
                    return;
                }
                
                // 转换用户类型：将英文值转换为中文
                let userType;
                if (editUserTypeSelect.value === 'admin') {
                    userType = '管理员';
                } else if (editUserTypeSelect.value === 'user') {
                    userType = '普通用户';
                }
                
                // 构建请求数据
                const userData = {
                    user_type: userType,
                    username: editUsernameInput.value.trim(),
                    status: editStatusSelect.value === 'active' ? '激活' : '未激活'
                };
                
                // 如果密码不为空，才包含在提交数据中
                if (editPasswordInput.value.trim()) {
                    userData.password = editPasswordInput.value.trim();
                }
                
                try {
                    // 发送AJAX请求到后端API
                    const response = await fetch(`http://localhost:5000/api/users/${userId}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(userData)
                    });
                    
                    const result = await response.json();
                    
                    if (response.ok) {
                        alert('用户更新成功！');
                        editUserModal.classList.add('hidden');
                        editUserForm.reset();
                        // 刷新用户列表
                        location.reload();
                    } else {
                        alert('更新失败: ' + (result.error || '未知错误'));
                    }
                } catch (error) {
                    alert('更新失败: ' + error.message);
                    console.error('Error updating user:', error);
                }
            });
        }
        
        // 删除确认模态框事件处理
        if (closeDeleteConfirm && deleteConfirmModal) {
            closeDeleteConfirm.addEventListener('click', () => {
                deleteConfirmModal.classList.add('hidden');
            });
        }
        
        if (cancelDelete && deleteConfirmModal) {
            cancelDelete.addEventListener('click', () => {
                deleteConfirmModal.classList.add('hidden');
            });
        }
        
        if (deleteConfirmModal) {
            deleteConfirmModal.addEventListener('click', (e) => {
                if (e.target === deleteConfirmModal) {
                    deleteConfirmModal.classList.add('hidden');
                }
            });
        }
        // 获取CSRF令牌
        function getCSRFToken() {
            let csrfToken = '';
            const cookies = document.cookie.split(';');
            for (const cookie of cookies) {
                const [name, value] = cookie.trim().split('=');
                if (name === 'csrftoken') {
                    csrfToken = decodeURIComponent(value);
                    break;
                }
            }
            return csrfToken;
        }
        
        // 显示通知函数
        function showNotification(message, type = 'info') {
            // 检查是否已存在通知元素，如果存在则移除
            const existingNotification = document.getElementById('notification');
            if (existingNotification) {
                existingNotification.remove();
            }
            
            // 创建通知元素
            const notification = document.createElement('div');
            notification.id = 'notification';
            
            // 设置样式和内容
            const bgColor = type === 'success' ? 'bg-green-500' : 
                           type === 'error' ? 'bg-red-500' : 'bg-blue-500';
            
            notification.className = `fixed top-4 right-4 px-4 py-3 rounded-md shadow-lg text-white ${bgColor} transform transition-all duration-300 ease-in-out z-50`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fa fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            
            // 添加到页面
            document.body.appendChild(notification);
            
            // 自动移除通知
            setTimeout(() => {
                notification.classList.add('opacity-0', 'translate-y-[-10px]');
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }
        
        // 初始化用户管理系统 - 使用与Flask API匹配的配置
        function initializeUserManagement() {
            // 用户API交互模块
            const API_BASE_URL = 'http://127.0.0.1:5000/api';
            
            // 获取所有用户
              async function fetchUsers(filters = {}) {
                  const url = new URL(`${API_BASE_URL}/users`);
                Object.keys(filters).forEach(key => {
                    if (filters[key]) {
                        url.searchParams.append(key, filters[key]);
                    }
                });
                
                try {
                    const response = await fetch(url, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error(`获取用户列表失败: ${response.status}`);
                    }
                    const data = await response.json();
                    return data;
                } catch (error) {
                    console.error('获取用户列表时出错:', error);
                    showNotification('获取用户列表失败，请稍后重试', 'error');
                    return [];
                }
            }
            
            // 获取单个用户
              async function fetchUser(userId) {
                  try {
                      const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    
                    if (!response.ok) {
                        throw new Error(`获取用户详情失败: ${response.status}`);
                    }
                    return await response.json();
                } catch (error) {
                    console.error('获取用户详情时出错:', error);
                    showNotification('获取用户详情失败，请稍后重试', 'error');
                    return null;
                }
            }
            
            // 创建用户
              async function createUser(userData) {
                  try {
                      // 转换数据格式以匹配后端模型
                      const formattedData = {
                          user_type: userData.user_type,
                          username: userData.username,
                          password: userData.password,
                          status: userData.status === 'active' ? '激活' : '未激活'
                      };
                    
                    const response = await fetch(`${API_BASE_URL}/users`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(formattedData)
                    });
                    
                    if (!response.ok) {
                        const errorData = await response.json().catch(() => ({}));
                        throw new Error(errorData.detail || JSON.stringify(errorData) || `创建用户失败: ${response.status}`);
                    }
                    
                    const result = await response.json();
                    showNotification('用户创建成功！', 'success');
                    refreshUserList();
                    return result;
                } catch (error) {
                    console.error('创建用户时出错:', error);
                    showNotification(error.message || '创建用户失败，请稍后重试', 'error');
                    return null;
                }
            }
            
            // 更新用户
              async function updateUser(userId, userData) {
                  try {
                      // 转换数据格式以匹配后端模型
                      const formattedData = {
                          user_type: userData.user_type,
                          username: userData.username,
                          status: userData.status === 'active' ? '激活' : '未激活'
                      };
                      
                      // 如果密码不为空，才包含在提交数据中
                      if (userData.password) {
                          formattedData.password = userData.password;
                      }
                    
                    const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
                        method: 'PUT',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(formattedData)
                    });
                    
                    if (!response.ok) {
                        const errorData = await response.json().catch(() => ({}));
                        throw new Error(errorData.detail || JSON.stringify(errorData) || `更新用户失败: ${response.status}`);
                    }
                    
                    const result = await response.json();
                    showNotification('用户更新成功！', 'success');
                    refreshUserList();
                    return result;
                } catch (error) {
                    console.error('更新用户时出错:', error);
                    showNotification(error.message || '更新用户失败，请稍后重试', 'error');
                    return null;
                }
            }
            
            // 删除用户
            async function deleteUser(userId) {
                try {
                    const response = await fetch(`${API_BASE_URL}/users/${userId}`, {
                        method: 'DELETE',
                        headers: {
                            'Accept': 'application/json'
                        }
                    });
                    
                    if (!response.ok) {
                        const errorData = await response.json().catch(() => ({}));
                        throw new Error(errorData.detail || JSON.stringify(errorData) || `删除用户失败: ${response.status}`);
                    }
                    
                    showNotification('用户删除成功！', 'success');
                    refreshUserList();
                    return true;
                } catch (error) {
                    console.error('删除用户时出错:', error);
                    showNotification(error.message || '删除用户失败，请稍后重试', 'error');
                    return false;
                }
            }
            
            // 刷新用户列表
            async function refreshUserList() {
                const tableBody = document.querySelector('table tbody');
                if (!tableBody) return;
                
                // 清空表格内容
                tableBody.innerHTML = '';
                
                // 显示加载状态
                const loadingRow = document.createElement('tr');
                loadingRow.innerHTML = `
                    <td colspan="5" class="px-6 py-4 text-center">
                        <div class="flex justify-center items-center">
                            <i class="fa fa-spinner fa-spin mr-2"></i>
                            <span>加载中...</span>
                        </div>
                    </td>
                `;
                tableBody.appendChild(loadingRow);
                
                // 获取用户数据
                const users = await fetchUsers();
                
                // 清空表格
                tableBody.innerHTML = '';
                
                // 检查是否有数据
                if (users.length === 0) {
                    const emptyRow = document.createElement('tr');
                    emptyRow.innerHTML = `
                        <td colspan="5" class="px-6 py-4 text-center text-gray-500">
                            暂无用户数据
                        </td>
                    `;
                    tableBody.appendChild(emptyRow);
                    return;
                }
                
                // 添加所有用户数据到表格
                users.forEach(user => {
                    const newRow = document.createElement('tr');
                    newRow.className = 'table-row-hover';
                    newRow.dataset.userId = user.id;
                    
                    // 设置用户类型徽章样式
                    const userTypeBadge = user.user_type === '管理员' || user.user_type === 'admin' ? 
                        '<span class="badge badge-info">管理员</span>' : 
                        user.user_type === '员工' || user.user_type === 'employee' ?
                        '<span class="badge badge-primary">员工</span>' :
                        '<span class="badge badge-warning">普通用户</span>';
                    
                    // 设置状态徽章样式
                    const statusBadge = user.status === '激活' ? 
                        '<span class="badge badge-success">已激活</span>' : 
                        '<span class="badge badge-danger">已禁用</span>';
                    
                    newRow.innerHTML = `
                        <td class="px-6 py-4 whitespace-nowrap">
                            ${userTypeBadge}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">${user.username}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            ********
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            ${statusBadge}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="#" class="text-blue-600 hover:text-blue-900 mr-3 view-user-btn">查看</a>
                            <a href="#" class="text-green-600 hover:text-green-900 mr-3 edit-user-btn">编辑</a>
                            <a href="#" class="text-red-600 hover:text-red-900 delete-user-btn">删除</a>
                        </td>
                    `;
                    
                    tableBody.appendChild(newRow);
                });
                
                // 更新分页信息
                const paginationInfo = document.querySelector('.text-sm.text-gray-700');
                if (paginationInfo) {
                    paginationInfo.innerHTML = `管理员`;
                }
                
                // 重新绑定按钮事件
                bindRowEvents();
            }
            
            // 绑定表格行内的按钮事件
            function bindRowEvents() {
                // 查看用户按钮事件
                document.querySelectorAll('.view-user-btn').forEach(btn => {
                    btn.addEventListener('click', async (e) => {
                        e.preventDefault();
                        const row = btn.closest('tr');
                        const userId = row.dataset.userId;
                        
                        const user = await fetchUser(userId);
                        if (user && viewUserModal) {
                            // 设置查看模态框内容
                            let userTypeText;
                            if (user.user_type === '管理员' || user.user_type === 'admin') {
                                userTypeText = '管理员';
                            } else if (user.user_type === '员工' || user.user_type === 'employee') {
                                userTypeText = '员工';
                            } else {
                                userTypeText = '普通用户';
                            }
                            document.getElementById('view-user-type').textContent = userTypeText;
                            document.getElementById('view-username').textContent = user.username;
                            document.getElementById('view-status').innerHTML = user.status === '激活' ? 
                                '<span class="badge badge-success">已激活</span>' : 
                                '<span class="badge badge-danger">已禁用</span>';
                            
                            // 显示模态框
                            viewUserModal.classList.remove('hidden');
                        }
                    });
                });
                
                // 编辑用户按钮事件
                document.querySelectorAll('.edit-user-btn').forEach(btn => {
                    btn.addEventListener('click', async (e) => {
                        e.preventDefault();
                        const row = btn.closest('tr');
                        const userId = row.dataset.userId;
                        
                        const user = await fetchUser(userId);
                        if (user && editUserModal) {
                            // 设置编辑模态框表单数据
                            document.getElementById('edit-user-id').value = user.id;
                            document.getElementById('edit-user-type').value = user.user_type;
                            document.getElementById('edit-username').value = user.username;
                            document.getElementById('edit-status').value = user.status === '激活' ? 'active' : 'inactive';
                            
                            // 清空密码字段
                            document.getElementById('edit-password').value = '';
                            
                            // 显示模态框
                            editUserModal.classList.remove('hidden');
                        }
                    });
                });
                
                // 删除用户按钮事件
                document.querySelectorAll('.delete-user-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        e.preventDefault();
                        const row = btn.closest('tr');
                        const userId = row.dataset.userId;
                        
                        if (deleteConfirmModal) {
                            // 设置要删除的用户ID
                            document.getElementById('delete-user-id').value = userId;
                            // 显示确认模态框
                            deleteConfirmModal.classList.remove('hidden');
                        }
                    });
                });
            }
            
            // 绑定全局按钮事件
            function bindEvents() {
                // 添加用户表单提交事件
                const addUserForm = document.getElementById('add-user-form');
                if (addUserForm) {
                    addUserForm.addEventListener('submit', async (e) => {
                        e.preventDefault();
                        
                        const username = document.getElementById('username').value;
                        
                        // 先检查用户名是否已存在
                        const users = await fetchUsers();
                        const isDuplicate = users.some(user => user.username === username);
                        
                        if (isDuplicate) {
                            showNotification('用户名已存在，请选择其他用户名', 'error');
                            return;
                        }
                        
                        const userData = {
                            user_type: document.getElementById('user-type').value,
                            username: username,
                            password: document.getElementById('password').value,
                            status: document.getElementById('status').value
                        };
                        
                        await createUser(userData);
                        
                        // 关闭模态框并重置表单
                        if (addUserModal) {
                            addUserModal.classList.add('hidden');
                            addUserForm.reset();
                        }
                    });
                }
                
                // 编辑用户表单提交事件
                const editUserForm = document.getElementById('edit-user-form');
                if (editUserForm) {
                    editUserForm.addEventListener('submit', async (e) => {
                        e.preventDefault();
                        
                        const userId = document.getElementById('edit-user-id').value;
                        const userData = {
                            user_type: document.getElementById('edit-user-type').value,
                            username: document.getElementById('edit-username').value,
                            password: document.getElementById('edit-password').value,
                            status: document.getElementById('edit-status').value
                        };
                        
                        await updateUser(userId, userData);
                        
                        // 关闭模态框
                        if (editUserModal) {
                            editUserModal.classList.add('hidden');
                        }
                    });
                }
                
                // 确认删除按钮事件
                if (confirmDelete) {
                    confirmDelete.addEventListener('click', async () => {
                        const userId = document.getElementById('delete-user-id').value;
                        await deleteUser(userId);
                        
                        // 关闭确认模态框
                        if (deleteConfirmModal) {
                            deleteConfirmModal.classList.add('hidden');
                        }
                    });
                }
                
                // 用户菜单切换
                const userMenuButton = document.getElementById('user-menu-button');
                const userMenu = document.getElementById('user-menu');
                
                if (userMenuButton && userMenu) {
                    userMenuButton.addEventListener('click', function() {
                        userMenu.classList.toggle('hidden');
                    });
                    
                    // 点击页面其他地方关闭下拉菜单
                    document.addEventListener('click', function(event) {
                        if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
                            userMenu.classList.add('hidden');
                        }
                    });
                }
                
                // 搜索功能
                const searchInput = document.querySelector('input[placeholder="搜索用户..."]');
                if (searchInput) {
                    searchInput.addEventListener('input', () => {
                        // 简单的前端搜索过滤
                        const searchTerm = searchInput.value.toLowerCase();
                        const rows = document.querySelectorAll('table tbody tr');
                        
                        rows.forEach(row => {
                            const usernameCell = row.querySelector('td:nth-child(2)');
                            if (usernameCell) {
                                const username = usernameCell.textContent.toLowerCase();
                                row.style.display = username.includes(searchTerm) ? '' : 'none';
                            }
                        });
                    });
                }
                
                // 用户类型筛选功能
                const userTypeSelect = document.querySelector('select');
                if (userTypeSelect && userTypeSelect.textContent.includes('选择用户类型')) {
                    userTypeSelect.addEventListener('change', () => {
                        const selectedType = userTypeSelect.value;
                        const rows = document.querySelectorAll('table tbody tr');
                        
                        rows.forEach(row => {
                            const userTypeCell = row.querySelector('td:first-child');
                            if (userTypeCell) {
                                const isAdmin = userTypeCell.textContent.includes('管理员');
                                const isUser = userTypeCell.textContent.includes('普通用户');
                                const isEmployee = userTypeCell.textContent.includes('员工');
                                
                                if (!selectedType || 
                                    (selectedType === 'admin' && isAdmin) || 
                                    (selectedType === 'user' && isUser) ||
                                    (selectedType === 'employee' && isEmployee)) {
                                    row.style.display = '';
                                } else {
                                    row.style.display = 'none';
                                }
                            }
                        });
                    });
                }
            }
            
            // 初始化
            bindEvents();
            refreshUserList();
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initializeUserManagement);
    </script>
</body>
</html>